﻿<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>郴州市防灾减灾作战图</title>
<link rel="stylesheet" href="./css/style.css">
<style>
.verifyCode{
    position: absolute;
    top: 241px;
    right: 26px;
}
.verifyCode a{
    color: #FB5781;
    text-decoration: none;
}
</style>
</head>
<body>
<div class="htmleaf-container">
	<div class="open">-  登陆  -</div>
	<div class="modal">
	  <div class="form">
		<form id="loginForm">
		  <label for="username" required="required">用户名</label>
		  <input name="username" type="text" placeHolder="用户名"/>
		  <label for="password" required="required">密  码</label>
		  <input name="password" type="password" placeHolder="密码"/>
		  <!-- <label for="picCode">验证码</label><br>
		  <input name="picCode" type="text" style="width:100px;" placeHolder="验证码"/>
      <div class="verifyCode">
      <img>
      <a href="#" >换一张</a>
      </div> -->
		  <button type="button" id="loginBtn">登 录</button>
		</form>
	  </div>
	  <div class="invite">
		<h3>欢迎使用郴州市防灾减灾作战图.</h3>
		<div class="nope">关闭</div>
		<div title="close" class="close"></div>
	  </div>
	</div>
</div>
<script src="./js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="./js/common.js" type="text/javascript"></script>
<script type="text/javascript">
if(isLogin()){
  document.location.href="./map/index.html";
}
$(function(){
  $(".close, .nope").on('click', function () {
	  $('.modal').addClass('hidden');
	  $('.open').addClass('active');
	})
	$(".open").on('click', function () {
	  $(this).removeClass('active');
	  $('.modal').removeClass('hidden');
	})
  $(".verifyCode a").on("click", function(){
    var now = new Date();
    $(".verifyCode img").attr("src", serverUrl + "/image/verify?" + now.getTime())
    return false;
  });
  $(".verifyCode a").click();
  $("#loginBtn").on("click", function(){
    var data=$("#loginForm").serializeArray();
    var params = {};
    $.each(data, function(i, field){
      var name = field.name;
      var placeHolder = field.placeHolder;
      params[name] = field.value;
    });
    if(! params.username){
      alert("用户名必填");
      return;
    }
    if(! params.password){
      alert("密码必填");
      return;
    }
//     if(! params.picCode){
//       alert("验证码必填");
//       return;
//     }
    console.log(JSON.stringify(params));
    $.ajax({
      url: serverUrl + "/api/login",
      data: params,
      type: "post",
      dataType: "json",
      success: function(res){
        if(res.code == 0){
          setLoginInfo(res.data);
          document.location.href="./map/index.html";
        }else{
          alert(res.msg)
        }
      },
      error: function(a,b,c){
        alert(b)
      }
    });
  });
});
</script>
</body>
</html>